/* css reset start */

html,
body,
div,
span,
iframe,
h1,
h2,
h3,
p,
blockquote,
q,
a,
abbr,
address,
em,
img,
strong,
ul,
ol,
li,
form,
input,
label,
select,
strong,
textarea,
button,
footer,
header,
nav { box-sizing: border-box; margin: 0; padding: 0; vertical-align: baseline; border: 0; }

footer,
nav,
header { display: block; }


/* div如果要设置100%， 必须把 html，body设置100%， 这样div才能继承 start */

html,
body { height: 100%; }


/* div如果要设置100%， 必须把 html，body设置100%， 这样div才能继承 end */

html { font-size: 62.5%; }

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1; width: 7.2rem; max-width: 720px; margin: 0 auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 清除webkit点击的时候出现的边框 */}

em { font-style: normal; }

a { text-decoration: none; }

:focus,
input,
select,
textarea { outline: none; }

textarea { resize: none; }

img { display: block; max-width: 100%; }

input[type='submit'],
label,
select { cursor: pointer; }

li { list-style: none; }

table { border-spacing: 0; border-collapse: collapse; }

input[type='submit'] { -webkit-appearance: none; }

::-webkit-inner-spin-button { -webkit-appearance: none; /* input[number] 上下小箭头按钮， 去掉 */}

::-webkit-resizer { display: none; /* 隐藏 textarea 右下角图标 */}

::-webkit-input-placeholder { /* color: #ccc; */
    /* placeholder 颜色 */}

.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* 多出的显示省略号 */}

.br { word-wrap: break-word; word-break: break-all; /* 强制换行 */}

.alert-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; background: rgba(0, 0, 0, .6); }


/* input[type="checkbox"] { -webkit-appearance: none; background: #ccc; } 更改checkbox按钮样式 */


/* input[type="checkbox"]:checked { -webkit-appearance: none; background: red; } 更改checkbox选中按钮样式 */

.fix:after { display: table; clear: both; content: ''; }


/* css reset end */

.app-header { position: fixed; top: .54rem; width: 7.2rem; }

.app-header .back {  background-size: .66rem .66rem; }

.app-header .share {  background-size: .66rem .66rem; }

.app-header .add {  background-size: .66rem .66rem; }

.app-header .dl { background-size: .66rem .66rem; }

.app-header a { width: .66rem; height: .66rem; }

.app-header a ~ a { float: right; }

.app-header a:first-child { float: left; margin-left: .11rem; }

.app-header a:nth-child(2) { margin-right: .18rem; }

.app-header a:nth-child(3) { margin-right: .27rem; }

.app-header a:nth-child(4) { margin-right: .28rem; }

.app-info { padding-top: 1.51rem; text-align: center; color: #333; }

.app-info .img { width: 2.1rem; height: 2.1rem; margin: 0 auto; border-radius: 20px; }

.app-info .title { font-size: .3rem; margin: .3rem 0 .1rem 0; }

.app-info .subtitle { font-size: .2rem; opacity: .6; }

.app-info .dl { font-size: .24rem; margin: .2rem 0 .3rem 0; opacity: .6; }

.app-info .tag { font-size: 0; margin-bottom: .3rem; }

.app-info .tag .a { font-size: .2rem; line-height: .4rem; display: inline-block; height: .4rem; padding: 0 .15rem; color: #fff; border-radius: .12rem; }

.app-info .tag .a ~ .a { margin-left: .15rem; }

.app-info .tag .a:nth-child(1) { background: #23aa43; }

.app-info .tag .a:nth-child(2) { background: #ffaa01; }

.app-info .tag .a:nth-child(3) { background: #1b69ab; }

.app-info .tag .a:nth-child(4) { background: #0382da; }

.app-info .prompt { font-size: .32rem; }

.app-info .tag1 { font-size: 0; margin: .3rem 0; }

.app-info .tag1 .a { font-size: .24rem; line-height: .4rem; display: inline-block; height: .4rem; color: #23aa43; border-radius: .12rem; }

.app-info .tag1 .a ~ .a { margin-left: .3rem; }

.app-info .more { font-size: .24em; display: block; margin-bottom: .4rem; color: #009bf5; }

.app-img-wrap { overflow-x: auto; overflow-y: hidden; width: 7.2rem; height: 4.2rem; }

.app-img-wrap .img { float: left; width: 2.8rem; height: 4.2rem; }

.app-img-wrap .img ~ .img { margin-left: .1rem; }

.app-ev { position: relative; height: .92rem; }

.app-ev .title { font-size: .28rem; position: absolute; left: 50%; margin-top: .5rem; transform: translate(-50%, 0); color: #333; }

.app-ev .lmess { font-size: .24rem; line-height: .6rem; position: absolute; top: .35rem; right: .3rem; width: 1.4rem; height: .6rem; text-align: center; color: #009bf5; border: 1px solid #009bf5; border-radius: 5px; }

.app-comm { padding: 0 .3rem; }

.app-comm .li { display: table; width: 100%; padding: .3rem 0; table-layout: fixed; border-bottom: 1px solid #d8d8d8; }

.app-comm .li ~ .li { border-bottom: 0; }

.app-comm .li .left { display: table-cell; width: 33px; vertical-align: top; }

.app-comm .li .left .img { width: 33px; height: 33px; border-radius: 50%; }

.app-comm .li .center { display: table-cell; padding-left: .2rem; color: #333; }

.app-comm .li .center .user { font-size: .24rem; }

.app-comm .li .center .data { font-size: .2rem; margin: .14rem 0 .34rem 0; opacity: .6; }

.app-comm .li .center .title { font-size: .28rem; margin-bottom: .14rem; }

.app-comm .li .center .text { font-size: .28rem; line-height: .42rem; }

.app-view-more { font-size: .24em; display: block; margin: .10rem 0 .40rem 0; text-align: center; color: #009bf5; }
